<template>
  <div class="container">
    <div class="card">
      <div class="flex flex-row align-middle">
        <img src="@/icons/svg/customer/warning-icon.svg" />
        <h4>{{ info.title }}</h4>
      </div>
      <p class="text-content mb-1">{{ info.des }}</p>
      <p class="des">{{ info.tip }}</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  info: {
    type: Object,
    default: {},
  },
});
</script>

<style lang="less" scoped>
.container {
  padding: 7px 15px;
  box-sizing: border-box;
  .card {
    background-color: #f9fafc;
    border-radius: 4px;
    padding: 16px;

    img {
      margin-right: 10px;
    }

    h4 {
      font-weight: 500;
      font-size: 16px;
      color: #262626;
      line-height: 22px;
    }

    .text-content {
      font-weight: 400;
      font-size: 14px;
      color: #595959;
      line-height: 22px;
      margin-top: 15px;
    }
    .des {
      font-weight: 400;
      font-size: 14px;
      color: #8c8c8c;
      line-height: 22px;
    }
  }
}
</style>
